import React, { Component } from 'react';
import { Modal, Table, Select, Button, Input, Tooltip } from 'antd'
import './index.css'

const { Option } = Select;
const columns = [{
  title: '产品名称',
  dataIndex: 'name',
  width: 150,
  key: 'name', render: (text, record) => {
    return (
      <div className="tool-tip">
        <Tooltip title={record.name}>
          <p>{record.name}</p>
        </Tooltip>
      </div>
    )
  }
}, {
  title: '编码',
  dataIndex: 'code',
  width: 100,
  key: 'code'
}, {
  title: '业务层次(院校)',
  dataIndex: 'businessLevelName',
  width: 250,
  key: 'businessLevelName'
}, {
  title: '产品标价',
  dataIndex: 'standardPrice',
  key: 'standardPrice'
}];

class ProductModal extends Component {
  state = {
    total: 0,
    selectRows: [],
    selectedRowKeys: [],
    searchData: {
      businessLevelId: "",
      name: "",
      code: "",
      status: 1,
      page: 1,
      rows: 10
    },
  }
  // 表格分页对象
  pageObj = {
    size: "small",
    total: 0,
    pageSize: this.state.searchData.rows,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: () => `共 ${this.props.productListTotal} 条`,
    onChange: (page) => {
      this.setState({
        searchData: Object.assign({}, this.state.searchData, {
          page
        })
      }, () => {
        this.props.onCheckProduct(this.state.searchData)
      })
    }
  }

  componentWillReceiveProps(newProps) {
    this.pageObj.total = newProps.productListTotal;
    //清空选择缓存
    this.setState({ selectedRowKeys: [] });
  }

  componentWillMount() {
    this.props.onCheckProduct(this.state.searchData);
  }

  //输入名字
  onNameChange = (event) => {
    let _obj = Object.assign({}, this.state.searchData, {
      name: event.target.value
    })
    this.setState({
      searchData: _obj
    })
  }
  // 输入产品编码
  onCodeChange = (event) => {
    let _obj = Object.assign({}, this.state.searchData, {
      code: event.target.value
    })
    this.setState({
      searchData: _obj
    })
  }
  //选择产品编码
  onSelectChange = (value) => {
    let _obj = Object.assign({}, this.state.searchData, {
      businessLevelId: value
    })
    this.setState({
      searchData: _obj
    })
  }


  //触发搜索
  handleOk = () => {
    this.props.handleOk(this.state.selectRows)
  }
  handleCancel = () => {
    this.props.handleCancel();
  }
  render() {
    const state = this.state;
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys, selectRows) => {
        this.setState({ selectedRowKeys, selectRows });
      }
    };
    return (
      <div>
        <Modal title="添加产品" style={{ height: 700 }} width={800} visible={this.props.modalData.visible}
          wrapClassName="vertical-center-modal"
          onOk={this.handleOk} onCancel={this.handleCancel}
        >
          <Select
            showSearch
            className="mr10"
            allowClear
            style={{ width: 200 }}
            optionFilterProp="children"
            onChange={this.onSelectChange}
            placeholder="业务层次"
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            {
              this.props.businessLevelSelect.map((item, index) => (
                <Option key={index} value={item.id}>{item.name}</Option>
              ))
            }
          </Select>
          <Input className="mr10" value={state.searchData.name} onChange={this.onNameChange} style={{ width: '170px' }} placeholder="输入产品名称" />
          <Input className="mr10" value={state.searchData.code} onChange={this.onCodeChange} style={{ width: '170px' }} placeholder="输入产品编码" />
          <Button type="primary" className="mb30" onClick={() => this.props.onCheckProduct(state.searchData)}>搜索</Button>
          <Table rowSelection={rowSelection} rowKey="id" columns={columns} pagination={this.pageObj} scroll={{ y: 340 }} dataSource={this.props.productList} />
        </Modal>
      </div>
    )
  }
}
export default ProductModal;